<template>
  <div>
    <van-address-list
      v-model="chosenAddressId"
      :list="addressList"
      @select="changeSelect"
      @add="onAdd"
      @edit="onEdit"
    >
      <template #item-bottom>
        <div>{{addressList[0].province+addressList[0].city+addressList[0].county+addressList[0].addressDetail }}</div>
      </template>
    </van-address-list>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      chosenAddressId: "",
      addressList: [],
      state: ""
    };
  },
  methods: {
    ...mapMutations(["changeStatus"]),
    getAddressList() {
      if (localStorage.getItem("address") == null) return false;
      this.addressList = JSON.parse(localStorage.getItem("address"));
      this.addressList.some(item => {
        if (item.isDefault === true) {
          this.chosenAddressId = item.id + "";
        }
        return;
      });
      console.log(this.chosenAddressId);
    },
    onAdd() {
      this.changeStatus("add");
      this.$router.push("/address_edit");
    },
    onEdit(item, index) {
      this.changeStatus("edit");
      // console.log(item);
      this.$router.push(`/address_edit?id=${item.id}`);
    },
    changeSelect(item, index) {
      this.addressList.forEach(ele => {
        ele.isDefault = false;
      });
      item.isDefault = true;
      localStorage.setItem("address", JSON.stringify(this.addressList));
    }
  },
  created() {
    this.getAddressList();
  },
  computed: {}
};
</script>

<style lang="less" scoped>
</style>